<template>
  <div class="float-population-wrapper">
    <p class="title">
      综合条件查询
      <el-link class="advance-search-btn" type="primary" :underline="false" @click="toggleAdvance">
        高级搜索<i class="el-icon-caret-bottom el-icon--right"></i>
      </el-link>
    </p>
    <div class="form-search-area">
      <el-form :inline="true" :model="formInline" size="medium" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="formInline.personNameLike" placeholder="请输入人员姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="formInline.sex" placeholder="请选择性别" clearable>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="formInline.idCardLike" placeholder="请输入身份证号" clearable></el-input>
        </el-form-item>
        <el-form-item label="关联状态">
          <el-select v-model="formInline.gggg" placeholder="请选择关联状态" clearable>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <!-- <div class="advanced-form-box shrink" ref="advancedForm"> -->
        <el-form-item label="曾用名" v-show="advanceStatus">
          <el-input v-model="formInline.personNameUsedLike" placeholder="请输入曾用名" clearable></el-input>
        </el-form-item>
        <el-form-item label="出生日期" v-show="advanceStatus">
          <el-date-picker
            v-model="formInline.birthDate"
            type="date"
            placeholder="请选择选择出生日期" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="民族" v-show="advanceStatus">
          <el-select v-model="formInline.nation" placeholder="请选择民族" clearable>
            <el-option
              v-for="(item) in DICY.nation"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="籍贯" v-show="advanceStatus">
          <el-input v-model="formInline.nativePlace" placeholder="请输入籍贯" clearable></el-input>
        </el-form-item>
        <el-form-item label="户口所在地" v-show="advanceStatus">
          <el-input v-model="formInline.householdRegister" placeholder="请输入户口所在地" clearable></el-input>
        </el-form-item>
        <el-form-item label="婚姻状况" v-show="advanceStatus">
          <el-select v-model="formInline.maritalStatus" placeholder="请选择婚姻状况" clearable>
            <el-option
              v-for="(item, index) in DICY.maritalStatus"
              :key="index"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历" v-show="advanceStatus">
          <el-select v-model="formInline.educationLevel" placeholder="请选择学历" clearable>
            <el-option
              v-for="(item) in DICY.educationLevel"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职业" v-show="advanceStatus">
          <el-input v-model="formInline.profession" placeholder="请输入职业" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式" v-show="advanceStatus">
          <el-input v-model="formInline.contactLike" placeholder="请输入联系方式" clearable></el-input>
        </el-form-item>
        <el-form-item label="住所类型" v-show="advanceStatus">
          <el-select v-model="formInline.houseType" placeholder="请选择住所类型" clearable>
            <el-option
              v-for="(item) in DICY.houseType"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否重点关注人员" v-show="advanceStatus">
          <el-select v-model="formInline.focusPeople" placeholder="请选择是否重点关注人员" clearable>
            <el-option
              v-for="(item) in DICY.yesOrNo"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- </div> -->
        <el-form-item>
          <el-button type="primary" size="medium" @click="searchOrg">查询</el-button>
          <el-button size="medium" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="right-btn-area">
        <el-button size="medium" type="primary" @click="popNewAddDialog">新增流动人口</el-button>
        <el-button size="medium">导入</el-button>
        <el-button size="medium">导出</el-button>
        <el-button size="medium" @click="batchDeletion">批量删除</el-button>
        <el-button size="medium">批量关联</el-button>
      </div>
    </div>
    <!-- 表格 开始-->
    <div class="table-area clearfix">
      <el-table :data="tableData" ref="multipleTable" @selection-change="selectionChange" v-loading="loading" stripe>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="姓名" prop="personName"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="出生日期" prop="birthDate"></el-table-column>
        <el-table-column label="人口类型" prop="populationType">
          <template slot-scope="scope">{{convertKeyToVal(scope.row.populationType, DICY.populationType)}}</template>
        </el-table-column>
        <el-table-column label="联系方式" prop="contact"></el-table-column>
        <el-table-column label="所属辖区" prop="jurisdiction"></el-table-column>
        <el-table-column label="关联状态" prop="guideDepart"></el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" icon="el-icon-view" @click="viewDetail(scope.row.id)">查看</el-link>
            <el-link type="success" :underline="false" icon="el-icon-edit" @click="editDetail(scope.row.id)">编辑</el-link>
            <el-link type="danger" :underline="false" icon="el-icon-delete" @click="deleteDetail(scope.row.id)">删除</el-link>
            <el-link type="warning" :underline="false" icon="el-icon-attract">关联</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paging-self"
        background
        :current-page.sync="currentPage"
        @current-change="pageChange"
        layout="total, prev, pager, next"
        :total="totalCount">
      </el-pagination>
    </div>
    <!-- 表格 结束-->
    <!-- 对话框 开始 -->
    <el-dialog title="流动人口" :visible.sync="dialogFormVisible" width="1140px" @closed="closeDialog">
      <el-form :model="dialogForm" class="dialog-form-comot" :disabled="dialogMode===CNST.READ_MODE" :rules="rules" ref="ruleDialog">
        <el-row>
          <el-col :span="8">
            <el-form-item label="公民身份号码" label-width="154px" prop="idCard">
              <el-input v-model="dialogForm.idCard" placeholder="公民身份号码" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名" label-width="154px" prop="personName">
              <el-input v-model="dialogForm.personName" placeholder="姓名" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="曾用名" label-width="154px" prop="personNameUsed">
              <el-input v-model="dialogForm.personNameUsed" placeholder="曾用名" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="性别" label-width="154px" prop="sex">
              <el-select v-model="dialogForm.sex" placeholder="性别" clearable>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" label-width="154px" prop="birthDate">
              <el-date-picker
                v-model="dialogForm.birthDate"
                type="date"
                placeholder="出生日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族" label-width="154px" prop="nation">
              <el-select v-model="dialogForm.nation" placeholder="民族" clearable>
                <el-option
                  v-for="(item) in DICY.nation"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="籍贯" label-width="154px" prop="nativePlace">
              <el-input v-model="dialogForm.nativePlace" placeholder="籍贯" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况" label-width="154px" prop="maritalStatus">
              <el-select v-model="dialogForm.maritalStatus" placeholder="婚姻状况" clearable>
                <el-option
                  v-for="(item, index) in DICY.maritalStatus"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌" label-width="154px" prop="politicalStatus">
              <el-select v-model="dialogForm.politicalStatus" placeholder="政治面貌" clearable>
                <el-option
                 v-for="(item, index) in DICY.politicalStatus"
                 :key="index"
                 :label="item.name"
                 :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="文化程度" label-width="154px" prop="educationLevel">
              <el-select v-model="dialogForm.educationLevel" placeholder="文化程度" clearable>
                <el-option
                 v-for="(item) in DICY.educationLevel"
                 :key="item.code"
                 :label="item.name"
                 :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宗教信仰" label-width="154px" prop="faith">
              <el-select v-model="dialogForm.faith" placeholder="宗教信仰" clearable>
                <el-option
                 v-for="(item, index) in DICY.faith"
                 :key="index"
                 :label="item.name"
                 :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职业类别" label-width="154px" prop="professionType">
              <el-input v-model="dialogForm.professionType" placeholder="职业类别" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="职业" label-width="154px" prop="profession">
              <el-input v-model="dialogForm.profession" placeholder="职业" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="服务处所" label-width="154px" prop="serviceSpace">
              <el-input v-model="dialogForm.serviceSpace" placeholder="服务处所" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系方式" label-width="154px" prop="contact">
              <el-input v-model="dialogForm.contact" placeholder="联系方式" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="单位联系方式" label-width="154px" prop="workContact">
              <el-input v-model="dialogForm.workContact" placeholder="单位联系方式" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="户籍地" label-width="154px" prop="householdRegister">
              <el-input v-model="dialogForm.householdRegister" placeholder="户籍地" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="户籍门（楼）详址" label-width="154px" prop="householdRegisterAddress">
              <el-input v-model="dialogForm.householdRegisterAddress" type="textarea" placeholder="户籍门（楼）详址" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="现住地" label-width="154px" prop="currentResidence">
              <el-input v-model="dialogForm.currentResidence" placeholder="现住地" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="现住门（楼）详址" label-width="154px" prop="currentAddress">
              <el-input v-model="dialogForm.currentAddress" type="textarea" placeholder="现住门（楼）详址" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="流入原因" label-width="154px" prop="comeReason">
              <el-select v-model="dialogForm.comeReason" placeholder="流入原因">
                <el-option
                  v-for="(item) in DICY.comeReason"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="办证类型" label-width="154px" prop="cardType">
              <el-select v-model="dialogForm.cardType" placeholder="办证类型">
                <el-option
                  v-for="(item) in DICY.cardType"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码" label-width="154px" prop="cardNo">
              <el-input v-model="dialogForm.cardNo" placeholder="证件号码" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="登记日期" label-width="154px" prop="registerDate">
              <el-input v-model="dialogForm.registerDate" placeholder="登记日期" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件到期日期" label-width="154px" prop="cardExpireDate">
              <el-input v-model="dialogForm.cardExpireDate" placeholder="证件到期日期" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="住所类型" label-width="154px" prop="houseType">
              <el-select v-model="dialogForm.houseType" placeholder="住所类型">
                <el-option
                  v-for="(item) in DICY.houseType"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否重点关注人员" label-width="154px" prop="focusPeople">
              <el-select v-model="dialogForm.focusPeople" placeholder="是否重点关注人员">
                <el-option
                  v-for="(item) in DICY.yesOrNo"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="人口类型" label-width="154px" prop="populationType">
              <el-select v-model="dialogForm.populationType" placeholder="人口类型" :disabled="true">
                <el-option
                  v-for="(item) in DICY.populationType"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrg" v-if="dialogMode!==CNST.READ_MODE">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对话框 结束 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {
  getGovernPopulationList,
  addGovernPopulation,
  updateGovernPopulationDetail,
  getGovernPopulationDetail,
  deleteGovernPopulation,
  deleteGovernPopulationBatch
} from '@/api/baseBusiness'
import { deepClone, convertDateToString } from '@/utils'
export default {
  name: 'FloatPopulation',
  data () {
    return {
      advanceStatus: false,
      formInline: {
        personNameLike: '',
        sex: '',
        idCardLike: '',
        gggg: '',
        personNameUsedLike: '',
        birthDate: '',
        nation: '',
        nativePlace: '',
        householdRegister: '',
        maritalStatus: '',
        educationLevel: '',
        profession: '',
        contactLike: '',
        houseType: '',
        focusPeople: ''
      },
      loading: false,
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      totalCount: 0,
      dialogFormVisible: false,
      dialogForm: {
        idCard: '',
        personName: '',
        personNameUsed: '',
        sex: '',
        birthDate: '',
        nation: '',
        nativePlace: '',
        maritalStatus: '',
        politicalStatus: '',
        educationLevel: '',
        faith: '',
        professionType: '',
        profession: '',
        serviceSpace: '',
        contact: '',
        workContact: '',
        householdRegister: '',
        householdRegisterAddress: '',
        currentResidence: '',
        currentAddress: '',
        comeReason: '',
        cardType: '',
        cardNo: '',
        registerDate: '',
        cardExpireDate: '',
        houseType: '',
        focusPeople: '',
        populationType: '2'// 流动人口
      },
      rules: {
        idCard: [{ required: true, message: '请输入公民身份号码', trigger: 'blur' }],
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        birthDate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
        nation: [{ required: true, message: '请选择民族', trigger: 'change' }],
        nativePlace: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
        maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }],
        politicalStatus: [{ required: true, message: '请选择政治面貌', trigger: 'change' }],
        educationLevel: [{ required: true, message: '请选择文化程度', trigger: 'change' }],
        professionType: [{ required: true, message: '请输入职业类别', trigger: 'blur' }],
        profession: [{ required: true, message: '请输入职业', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        householdRegister: [{ required: true, message: '请输入户籍地', trigger: 'blur' }],
        householdRegisterAddress: [{ required: true, message: '请输入户籍门（楼）详址', trigger: 'blur' }],
        currentResidence: [{ required: true, message: '请输入现住地', trigger: 'blur' }],
        currentAddress: [{ required: true, message: '请输入现住门（楼）详址', trigger: 'blur' }],
        comeReason: [{ required: true, message: '请选择流入原因', trigger: 'change' }],
        houseType: [{ required: true, message: '请选择住所类型', trigger: 'change' }],
        focusPeople: [{ required: true, message: '请选择是否重点关注人员', trigger: 'change' }]
      },
      dialogMode: '', // 对话框的状态，新增，查看，编辑
      curId: '', // 点击查看或编辑的当前列表项的id
      options: this.DICY.jilian
    }
  },
  computed: {
    ...mapState([
      'areaId'
    ])
  },
  methods: {
    convertKeyToVal (code, arr) {
      arr = Array.isArray(arr) ? arr : []
      let resArr = arr.filter((item) => {
        return item.code === code
      })
      if (resArr.length === 0) {
        return ''
      }
      return resArr[0].name
    },
    toggleAdvance () {
      // this.$refs.advancedForm.classList.toggle('shrink')
      this.advanceStatus = !this.advanceStatus
    },
    searchOrg () {
      this.currentPage = 1
      this.getOrgListAndShow()
    },
    resetSearch () {
      for (let key in this.formInline) {
        this.$set(this.formInline, key, '')
      }
      this.currentPage = 1
      this.getOrgListAndShow()
    },
    popNewAddDialog () {
      this.$set(this.dialogForm, 'populationType', '2')
      this.dialogFormVisible = true
      this.dialogMode = this.CNST.ADDNEW_MODE
    },
    batchDeletion () {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请勾选要删除的项!'
        })
      } else {
        var ids = this.multipleSelection.map((item) => {
          return item.id
        }).join(',')
        this.$confirm('确定删除, 是否继续?', '批量删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteGovernPopulationBatch({ ids }).then((res) => {
            this.$message({
              type: 'success',
              message: '批量删除成功!'
            })
            this.getOrgListAndShow()
          })
        })
      }
    },
    selectionChange (valArr) {
      this.multipleSelection = valArr
    },
    showToDialog (data) {
      for (let key in data) {
        if (this.dialogForm.hasOwnProperty(key)) {
          this.$set(this.dialogForm, key, data[key])
        }
      }
    },
    viewDetail (id) {
      this.dialogMode = this.CNST.READ_MODE
      this.dialogFormVisible = true
      getGovernPopulationDetail({ id }).then((res) => {
        this.showToDialog(res.data)
      })
    },
    editDetail (id) {
      this.dialogMode = this.CNST.EDIT_MODE
      this.dialogFormVisible = true
      this.curId = id
      getGovernPopulationDetail({ id }).then((res) => {
        this.showToDialog(res.data)
      })
    },
    deleteDetail (id) {
      this.$confirm('确定删除, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        deleteGovernPopulation({ id }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getOrgListAndShow()
        })
      })
    },
    pageChange (curPage) {
      this.currentPage = curPage
      this.getOrgListAndShow()
    },
    submitOrg () {
      this.$refs.ruleDialog.validate((valid) => {
        if (valid) {
          // -----------------
          let requestData = deepClone(this.dialogForm)
          convertDateToString(requestData)
          if (this.dialogMode === this.CNST.ADDNEW_MODE) {
            // 新增
            requestData.areaId = this.areaId
            addGovernPopulation(requestData).then((res) => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.getOrgListAndShow()
              this.dialogFormVisible = false
            })
          } else if (this.dialogMode === this.CNST.EDIT_MODE) {
            // 修改
            requestData.id = this.curId
            updateGovernPopulationDetail(requestData).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getOrgListAndShow()
              this.dialogFormVisible = false
            })
          }
          // -----------------
        } else {
          return false
        }
      })
    },
    async getOrgListAndShow () {
      try {
        this.loading = true
        let requestData = {
          page: this.currentPage,
          areaId: this.areaId,
          ...deepClone(this.formInline)
        }
        convertDateToString(requestData)
        var res = await getGovernPopulationList(requestData)
        this.tableData = res.data.queryResult.filter(item => item.populationType === '2')
        this.totalCount = res.data.totalCount
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    closeDialog () {
      // 当前点击查看或编辑列表项的id置空
      this.curId = ''
      // 弹框关闭后重置表单验证
      this.$refs.ruleDialog.resetFields()
      // 清空弹框内表单数据
      for (let key in this.dialogForm) {
        this.dialogForm[key] = ''
      }
    },
    handleChange (value) {
      console.log(value)
    }
  },
  mounted () {
    this.getOrgListAndShow()
  }
}
</script>

<style lang="scss" scoped>
.float-population-wrapper {
  background-color: #ffffff;
  margin-top: 12px;
  border-radius: 4px;
  box-shadow: 10px 10px 22px -2px #d2d6da;
  padding: 20px;
  .title {
    margin: 0;
    font-size: 15px;
    color: #333333;
    margin-bottom: 10px;
    .advance-search-btn {
      float: right;
      user-select: none;
    }
  }
  .form-search-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .advanced-form-box {
      overflow: hidden;
      transition: all 200ms;
      &.shrink {
        display: inline-block;
        width: 0;
        height: 0;
        transition: all 200ms;
      }
    }
    .right-btn-area {
      height: 58px;
    }
  }
  .table-area {
    .el-link {
      margin-right: 13px;
    }
    .el-pagination.paging-self {
      margin-top: 20px;
      float: right;
    }
  }
  .el-form.dialog-form-comot {
    .el-form-item {
      .el-cascader,.el-select,.el-input-number {
        width: 100%;
      }
    }
  }
}
</style>
